import { defineComponent, ref } from "vue";
const Middle = defineComponent({
	setup() {
		return () => {
			return (
				<div class="monitor-screen-middle">
					<InstrumentParam />
					{/* 地图 */}
					<Map />
					{/* 下方表格 */}
					<BottomTable />
				</div>
			);
		};
	}
});
export default Middle;

import { getDeviceList } from "@/api/modules/iot/device";
import voltage from "@/assets/images/monitor/voltage.png";
import quantity from "@/assets/images/monitor/quantity.png";
import current from "@/assets/images/monitor/current.png";
import devImg from "@/assets/images/monitor/dev.png";
const InstrumentParam = defineComponent({
	setup() {
		return () => {
			return (
				<div class="Instrument">
					<div class="flex flex-1 justify-center">
						<el-image src={voltage}></el-image>
						<div class="my-auto">
							<div>###</div>
							<div>电源电压（V）</div>
						</div>
					</div>
					<div class="flex flex-1 justify-center">
						<el-image src={current}></el-image>
						<div class="my-auto">
							<div>###</div>
							<div>电源电流（A）</div>
						</div>
					</div>
					<div class="flex flex-1 justify-center">
						<el-image src={quantity}></el-image>
						<div class="my-auto">
							<div>###</div>
							<div>累计耗电量（kW/h）</div>
						</div>
					</div>
				</div>
			);
		};
	}
});

// 地图
const Map = defineComponent({
	setup() {
		const defaultData = ref([
			// { id: 1, position: { lng: 116.404, lat: 39.915 }, name: "测试1", img: img15 },
			// { id: 2, position: { lng: 116.396, lat: 39.915 }, name: "测试2", img: img15 }
		]);
		const mapInfo = ref({
			center: { lng: 116.404, lat: 39.915 },
			full: false
		});

		// 获取设备数据
		const getList = async () => {
			// 设备总数
			let res = await getDeviceList({ pageIndex: 1, pageSize: 9000000 });
			let list: any = res.result?.records || [];
			const newList: any = [];
			for (let i = 0; i < list.length; i++) {
				if (list[i]?.location?.lat && list[i]?.location?.lng) {
					newList.push(list[i]);
				}
			}
			if (newList.length) {
				mapInfo.value.center = { lng: newList[0].location.lng, lat: newList[0].location.lat };
			}
			defaultData.value = newList as any;
		};
		getList();
		return () => {
			return (
				<div class="flex map-box">
					<el-image src={devImg} class=""></el-image>
					<div class="flex flex-col flex-1 h-full">
						<div class="dev-card flex flex-col justify-evenly ">
							<div class="flex text">
								<div>频率:</div>
								<div class="mr-6 ml-6">--</div>
								<div>Hz</div>
							</div>
							<div class="flex text">
								<div>电压:</div>
								<div class="mr-6 ml-6">--</div>
								<div>V</div>
							</div>
							<div class="flex text">
								<div>电流:</div>
								<div class="mr-6 ml-6">--</div>
								<div>A</div>
							</div>
						</div>
						<div class="dev-card flex flex-col justify-evenly ">
							<div class="flex text">
								<div>频率:</div>
								<div class="mr-6 ml-6">--</div>
								<div>Hz</div>
							</div>
							<div class="flex text">
								<div>电压:</div>
								<div class="mr-6 ml-6">--</div>
								<div>V</div>
							</div>
							<div class="flex text">
								<div>电流:</div>
								<div class="mr-6 ml-6">--</div>
								<div>A</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
// 下方表格
const BottomTable = defineComponent({
	setup() {
		return () => {
			return (
				<div class="bottom-table">
					<div class="mt-4">
						<div class="text-center">启停选择</div>
						<div class="flex justify-center">
							<div class="btn cursor-pointer">启动</div>
							<div class="btn cursor-pointer">停止</div>
						</div>
					</div>
					<div class="mt-4">
						<div class="text-center">模式选择</div>
						<div class="flex justify-center">
							<div class="btn cursor-pointer">手动</div>
							<div class="btn cursor-pointer">自动</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
